<template>
	<view class="login">
		<image src="../../static/login/dt01.png"></image>
		<view class="position-absolute;" style="width:600rpx;height: 1100rpx;background-color: #FFFFFF;top:50%;left:50%;transform: translate(-50%,-50%);border-radius:15rpx">
			<view style="margin: 200rpx 80rpx 80rpx 80rpx">
				<image style="width:330rpx;height: 50rpx;" src="../../static/login/wel01@2x.png"></image>
				
			<view style="margin-top:141rpx">
				<view>
					<view class="d-flex">
						<image style="width:39rpx;height: 39rpx;" src="../../static/login/zh01@2x.png"></image>
						<input :maxlength="11" style="margin-left:30rpx;width:380rpx;" v-model="user.name" class="login-zt" type="number" value="" placeholder="请输入账号">
					</view>
					<view style="width:380rpx;;height: 2rpx;background: #EF9A47;border: 3rpx solid #EF9A47;border-radius: 1rpx;margin-top:30rpx;margin-left:67rpx"></view>
				</view>
				
				<view style="margin-top:74rpx">
					<view class="d-flex">
						<image style="width:39rpx;height: 39rpx;" src="../../static/login/mm01@2x.png"></image>
						<input style="margin-left:30rpx;width:380rpx;" v-model="user.password" class="login-zt" type="text" :password="true" value="" placeholder="请输入密码">
					</view>
					<view style="width:380rpx;;height: 2rpx;background: #EF9A47;border: 3rpx solid #EF9A47;border-radius: 1rpx;margin-top:30rpx;margin-left:67rpx"></view>
				</view>
				
				<view class="d-flex" style="margin-top:61rpx">
					<label>
						<checkbox value="cb" :checked="ischecked" @click="ischecked=!ischecked" color="#F2973C" />
					</label>
					<view style="margin-left:10rpx;font-size: 24rpx;">
						本人已阅读、理解并认可<text @click="illustrate('user')" class="main-text-color">《用户协议》</text>及<text @click="illustrate('privacy')" class="main-text-color">《用户隐私政策说明》</text>全部内容
					</view>
				</view>
			</view>
			</view>
			<view @click="login" class="d-flex a-center j-center text-white" style="width: 510rpx;height: 98rpx;background: #F2973C;border-radius: 49rpx;margin:0 40rpx 0 40rpx">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				ischecked:false,
				noClick:true,//防止多次点击按钮
				user:{
					name:'',
					password:''
				}
			}
		},
		methods: {
			...mapMutations(['Login']),
			illustrate(e){
				if(e=='user'){
					uni.navigateTo({
						url:'/pages/user-agreement/user-agreement'
					})
				}else if(e=='privacy'){
					uni.navigateTo({
						url:'/pages/privacy/privacy'
					})
				}
			},
			changeLogin(){
				// 授权
				// 获取用户详细信息, 可以获取到说明已经授权过, 直接拿到用户信息
				uni.getUserInfo({
					provider: 'weixin',
					//授权成功的回调
					success(res) {
						uni.showToast({
						  title:'授权成功',
							icon:'none'
						})
						console.info(res.data)
						//that.login(res.data);//授权成功调用自己的登录方法就可以了
					},
					//第一次进入小程序
					fail() {
						uni.showToast({
							title: '请点击授权进行登录',
							icon: 'none'
						});
					}
				});
			},
			login(){
				// 表单校验
				let loginRules = [
					{name: 'name', type: 'required', errmsg: '用户名不能为空'},
					{name: 'password', type: 'required', errmsg: '密码不能为空'},
				]
				let valLoginRes = this.$validate.validate(this.user, loginRules)
				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				}
				if(!this.ischecked){
					uni.showToast({
						icon: 'none',
						title: '请查看说明并同意勾选'
					})
					return false
				}
				if(!this.noClick) return
				this.noClick = false
				this.$api.login({
					userName:this.user.name,
					password:this.user.password
				},false).then(res=>{
					if(res.code===200&&res.data){
						this.Login(res.data)
						uni.showToast({
							title:'登录成功',
							icon:'success',
							success() {
								setTimeout(()=>{
									uni.reLaunch({
										url:'/pages/index/index'
									})
								},500)
							}
						})
					}else{
						this.noClick = true
						uni.showToast({
							title:"当前账户不存在",
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login{
		position: relative;
		height: 100%;
		image{
			height: 100%;
		}
		.login-zt{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #D2D2D2;
			line-height: 48rpx;
		}
	}
</style>
